<template>
  <div class="doctor-overview">
    <div class="dashboard-header">
      <h2>控制台概览</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索患者或病历"
          class="search-input"
          size="large"
        >
          <template #append>
            <el-button type="primary" icon="Search">搜索</el-button>
          </template>
        </el-input>
      </div>
    </div>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #409eff;">
              <el-icon><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">今日接诊</div>
              <div class="stat-value">18</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #67c23a;">
              <el-icon><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">待处理病历</div>
              <div class="stat-value">7</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #e6a23c;">
              <el-icon><AlarmClock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">预约排队</div>
              <div class="stat-value">12</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: #f56c6c;">
              <el-icon><Bell /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-title">紧急通知</div>
              <div class="stat-value">2</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <div class="title">
            <el-icon><User /></el-icon>
            <span>患者管理</span>
          </div>
          <el-button type="primary" icon="Plus">添加新患者</el-button>
        </div>
      </template>
      
      <el-table :data="patients" style="width: 100%" stripe>
        <el-table-column prop="name" label="姓名" width="120" sortable />
        <el-table-column prop="age" label="年龄" width="100" />
        <el-table-column prop="gender" label="性别" width="100" />
        <el-table-column prop="phone" label="联系方式" width="150" />
        <el-table-column prop="lastVisit" label="最近就诊时间" width="180" sortable />
        <el-table-column prop="diagnosis" label="主要诊断" />
        <el-table-column prop="records" label="病历数" width="120" align="center">
          <template #default="scope">
            <el-tag type="info">{{ scope.row.records }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" icon="Edit" @click="editPatient(scope.row)">详情</el-button>
            <el-button type="danger" size="small" icon="Delete" @click="transferPatient(scope.row)">转诊</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <div class="title">
            <el-icon><Document /></el-icon>
            <span>病历管理</span>
          </div>
          <el-button type="primary" icon="Plus" @click="createNewRecord">创建新病历</el-button>
        </div>
      </template>
      
      <el-table :data="medicalRecords" style="width: 100%" stripe>
        <el-table-column prop="recordId" label="病历ID" width="120" sortable />
        <el-table-column prop="patientName" label="患者姓名" width="120" />
        <el-table-column prop="date" label="日期" width="150" />
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="statusTagType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="department" label="科室" width="120" />
        <el-table-column prop="diagnosis" label="诊断结果" />
        <el-table-column prop="blockHash" label="区块链哈希" min-width="180" show-overflow-tooltip>
          <template #default="scope">
            <el-link type="primary" @click="viewBlockDetails(scope.row)">
              {{ truncateHash(scope.row.blockHash) }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" icon="View" @click="viewRecordDetails(scope.row)"></el-button>
            <el-button type="success" size="small" icon="Edit" @click="editRecord(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    
    // 患者数据
    const patients = ref([
      { name: '张明', age: 45, gender: '男', phone: '13800138000', lastVisit: '2023-07-21 10:30', diagnosis: '高血压', records: 5 },
      { name: '李红', age: 32, gender: '女', phone: '13900139000', lastVisit: '2023-07-20 14:15', diagnosis: '糖尿病', records: 8 },
      { name: '王建国', age: 65, gender: '男', phone: '13700137000', lastVisit: '2023-07-19 09:45', diagnosis: '冠心病', records: 12 },
      { name: '刘静', age: 28, gender: '女', phone: '13600136000', lastVisit: '2023-07-18 16:20', diagnosis: '哮喘', records: 3 },
      { name: '陈晓', age: 50, gender: '男', phone: '13500135000', lastVisit: '2023-07-17 11:10', diagnosis: '慢性胃炎', records: 6 }
    ])
    
    // 病历数据
    const medicalRecords = ref([
      { recordId: 'REC20230721001', patientName: '张明', date: '2023-07-21 10:30', status: '已完成', department: '内科', diagnosis: '高血压II期', blockHash: '0x9b7b0d1e4d8f0c3a6b5d2e8f1a0c3b5d2e8f1a0c3' },
      { recordId: 'REC20230720002', patientName: '李红', date: '2023-07-20 14:15', status: '待审核', department: '内分泌科', diagnosis: '糖尿病I型', blockHash: '0x742d35cc6634c0532925a3b844bc454e4438f44e' },
      { recordId: 'REC20230719003', patientName: '王建国', date: '2023-07-19 09:45', status: '已归档', department: '心血管科', diagnosis: '冠心病', blockHash: '0x5aafe7e8d70aae3a1c1b8f8c1e1a0c3b5d2e8f1a0' },
      { recordId: 'REC20230718004', patientName: '刘静', date: '2023-07-18 16:20', status: '已完成', department: '呼吸科', diagnosis: '哮喘急性发作', blockHash: '0x3dca034f7e8d70aae3a1c1b8f8c1e1a0c3b5d2e8' },
      { recordId: 'REC20230717005', patientName: '陈晓', date: '2023-07-17 11:10', status: '待完善', department: '消化科', diagnosis: '慢性胃炎伴糜烂', blockHash: '0x1e57997e8d70aae3a1c1b8f8c1e1a0c3b5d2e8f1' }
    ])
    
    // 辅助函数
    const statusTagType = (status) => {
      const statusMap = {
        '已完成': 'success',
        '待审核': 'warning',
        '已归档': 'info',
        '待完善': 'danger'
      }
      return statusMap[status] || ''
    }
    
    const truncateHash = (hash) => {
      if (!hash) return ''
      return `${hash.substring(0, 6)}...${hash.substring(hash.length - 4)}`
    }
    
    // 操作函数
    const editPatient = (patient) => console.log('编辑患者:', patient)
    const transferPatient = (patient) => console.log('转诊患者:', patient)
    const createNewRecord = () => console.log('创建新病历')
    const viewRecordDetails = (record) => console.log('查看病历详情:', record)
    const editRecord = (record) => console.log('编辑病历:', record)
    const viewBlockDetails = (record) => console.log('查看区块链详情:', record.blockHash)
    
    return {
      searchQuery,
      patients,
      medicalRecords,
      statusTagType,
      truncateHash,
      editPatient,
      transferPatient,
      createNewRecord,
      viewRecordDetails,
      editRecord,
      viewBlockDetails
    }
  }
}
</script>

<style scoped>
.doctor-overview {
  padding: 20px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.search-input {
  width: 400px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  margin-bottom: 0;
  border: none;
  border-radius: 8px;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
  padding: 15px 0;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 22px;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.main-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header .title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
}

.card-header .el-icon {
  color: #409eff;
}
</style>